<template>
  <div class="nav-bar-wrapper">
    <el-row type="flex" justify="center">
      <el-col class="nav-title" :span="16">{{title}}</el-col>
    </el-row>
    <el-menu class="nav-router"
             mode="horizontal"
             text-color="#0389E6"
             active-text-color="#E8A550"
             :default-active="path"
             router>
      <el-menu-item index="/home/exhibition">主页展示</el-menu-item>
      <el-menu-item index="/home/manage">后台管理</el-menu-item>
      <el-menu-item @click="exit">退出登录</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    title: String
  },
  methods: {
    exit () {
      this.$emit('exit')
    }
  },
  beforeDestroy () {
    this.$off('exit')
  },
  computed: {
    path () {
      return this.$route.fullPath
    }
  }
}
</script>

<style lang="scss" scoped>
  .nav-bar-wrapper {
    width: 100%;
    text-align: center;
    color: rgb(0, 234, 251);
    padding: 0 2rem;
    box-sizing: border-box;

    .nav-title {
      text-align: center;
      padding-top: 1.6rem;
      font-size: 2.4rem;
      height: 74px;
      background: url("../../assets/nav_title.png") no-repeat left;
      background-size: 100% 100%;
    }

    .nav-router {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      background: url("../../assets/nav_router.png") no-repeat center;
      height: 5rem;
    }
  }
</style>
